<template>
  <template v-for="item in menuList">
    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.id" :key="item.id">
      <template #title>
        <span>{{ item.name }}</span>
      </template>
      <MenuItem :menuList="item.children"></MenuItem>
    </el-sub-menu>
    <el-menu-item
      v-else
      :index="item.id"
      :key="item.id"
      @click="changeMainComponent(item.component)"
    >
      <span>{{ item.name }}</span>
    </el-menu-item>
  </template>
</template>

<script lang="ts" setup>
import { ElMenuItem, ElSubMenu } from 'element-plus'
import type { SysMenu } from '@/types/index'
import emitter from '@/utils/emitter'

// 接收父组件传递的菜单列表
const props = defineProps<{ menuList: SysMenu[] }>()
const menuList = props.menuList

const changeMainComponent = (compName: string) => {
  // 触发父组件事件，传递子组件的compName
  emitter.emit('update:mainComp', compName)
}
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
